<template>
	<view class="conent">
		<view class="conent_box">
			<view v-for="(item, index) in order.items" :key="index">
				<view class="order">
					<u-row customStyle="margin: 10rpx;border-bottom:4rpx solid #fafafa;">
						<u-col span="4">
							<u--image :src="item.goodsImage" width="80px" height="80px" radius="10"></u--image>
						</u-col>
						<u-col span="8">
							<u-row>
								<u-col span="8">
									<u--text :text="item.goodsName" size="14" bold align="left"
										color="#000000"></u--text>
								</u-col>
								<u-col span="4">
									<u--text :text="item.price" size="14" bold mode="price" align="right"
										color="#000000"></u--text>
								</u-col>
							</u-row>
							<view style="height:40rpx"></view>
							<u--text :text="'数量'+item.quantity" size="14" bold align="left" color="#999999"></u--text>
						</u-col>
					</u-row>
				</view>
				<view class="estimate">
					<u-radio-group v-model="item.level" placement="row" activeColor="#FD574A" @change="groupChange">
						<u-radio customStyle="margin-right: 40rpx;" v-for="(itemr, indexr) in evaluatelist"
							:key="indexr" :label="itemr.label" :name="itemr.name" @change="evaluateChange">
						</u-radio>
					</u-radio-group>
					<u-textarea v-model="item.content" placeholder="填写详细街道" count placeholderStyle="text-align:left;"
						height="140" customStyle="text-align:left;background:#F7F7F7;margin-top:20rpx;"></u-textarea>
					<u--text text="上传图片" size="14" bold align="left" lineHeight="40" color="#000000"></u--text>
					<u-upload :fileList="item.iamgeUrls" @afterRead="afterRead" @delete="deletePic" multiple
						:name="index" :maxCount="9" :previewFullImage="true"></u-upload>
				</view>
			</view>
		</view>
		<view class="flex">
			<u-button text="发布" @click="publish"
				customStyle="border:none;color:#fff;background:#07BFA5;border-radius:16rpx;"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		uploadFile
	} from "@/api/pages/events.js"
	import {
		evaluate
	} from "@/api/pages/goods.js"
	import api from "@/api/api.js"
	import router from '@/api/router';
	const order = ref({})
	const evaluatelist = ref([{
			label: '好评',
			name: '1',
			disabled: false
		}, {
			label: '中评',
			name: '2',
			disabled: false
		},
		{
			label: '差评',
			name: '3',
			disabled: false
		}
	])
	// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
	const estimate = ref('1')
	const pass = ref(true)
	// const review = ref({
	// 	orderId: '',
	// 	evaluates: [{
	// 		level: '1',
	// 		content: '',
	// 		goodsId: '',
	// 		specId: '',
	// 		iamgeUrls: []
	// 	}, {
	// 		level: '1',
	// 		content: '',
	// 		goodsId: '',
	// 		specId: '',
	// 		iamgeUrls: []
	// 	}]
	// })
	onLoad((options) => {
		order.value = JSON.parse(options.orderInfo)
		order.value.items = order.value.items.map((item) => {
			console.log(item);
			// ...item,
			return {
				...item,
				goodsId: item.goodsId,
				specId: item.specId,
				price: item.price,
				quantity: item.quantity,
				level: '1',
				content: '',
				iamgeUrls: []
			}
		})
		console.log(order.value.items);
		// review.value = order.value.orderId
		// order.value.items.goodsId = order.value.items[0].goodsId
		// order.value.items.specId = order.value.items[0].specId
	})
	const groupChange = (n) => {
		console.log('groupChange', n);
	}
	const evaluateChange = (n) => {
		console.log('evaluateChange', n);
	}
	// 删除图片
	const deletePic = (event) => {
		order.value.items[`${event.name}`].iamgeUrls.splice(event.index, 1)
	}
	// 新增图片
	const afterRead = async (event) => {
		// console.log(event, `${event.name}`);
		// return
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = order.value.items[`${event.name}`].iamgeUrls.length
		lists.map((item) => {
			order.value.items[`${event.name}`].iamgeUrls.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			// const result = await uploadFile(lists[i].url).then()
			const result = await uploadFilePromise(lists[i].url)
			console.log(result);
			let item = order.value.items[`${event.name}`].iamgeUrls[fileListLen]
			// order.value.items[`${event.name}`].iamgeUrls.splice(fileListLen, 1, Object.assign(item, {
			// 	status: 'success',
			// 	message: '',
			// 	url: result
			// }))
			order.value.items[`${event.name}`].iamgeUrls.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				...result
			}))
			fileListLen++
		}
	}
	const uploadFilePromise = async (url) => {
		// const res = await uploadFile({
		// 	file: url
		// }).then()
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: api.baseUrl + '/jeecg-boot/sys/oss/file/uploadFile', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					// console.log(JSON.parse(res.data));
					setTimeout(() => {
						resolve(JSON.parse(res.data).result)
					}, 1000)
				}
			});
		})
	}
	const publish = () => {
		// const orderObject = order.value
		pass.value = true
		const orderItemArray = order.value.items
		const orderObject = {
			orderId: order.value.orderId,
			evaluates: orderItemArray.map((item, index) => {
				if (item.content.length <= 0 || item.iamgeUrls.length <= 0) {
					pass.value = false
				}
				return {
					goodsId: item.goodsId,
					specId: item.specId,
					// price: item.price,
					// quantity: item.quantity,
					level: item.level,
					content: item.content,
					iamgeUrls: item.iamgeUrls.map((i) => {
						return i.url
					})
					// .toString()
				}
				// if (item.content.length > 0 && item.iamgeUrls.length > 0) {
				// 	pass.value = true
				// 	console.log("true===", item);
				// } else {
				// 	pass.value = false
				// 	console.log("false===", item);
				// }
				// if (pass.value == false) return
			})
		}
		console.log("pass.value = ", pass.value, orderObject);
		evaluateOrder(orderObject)
	}
	const evaluateOrder = async (form) => {
		const res = await evaluate(form).then()
	}
</script>

<style lang="scss" scoped>
	body {
		background: #f7f7f7;
	}

	:deep(.u-upload__wrap[data-v-c8491d64]) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.conent_box {
		margin-top: 0;

		.order,
		.estimate {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			background: #fff;
		}

		.estimate {
			padding: 20rpx 40rpx;
		}
	}

	.flex {
		// position: fixed;
		// bottom: 0;
		width: 90%;
		padding: 20rpx 5%;
		background: #fff;
		z-index: 10;
	}
</style>